<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2">
        <div class="dw-user-body">
          <el-row>
            <el-col :span="4" style="height: 600px;">
              <self-menu></self-menu>
            </el-col>
            <el-col :span="20">
              <div style="padding: 30px;width: 400px;">
                <el-form ref="ruleForm" :model="ruleForm" :rules="rules" status-icon label-width="100px" label-position="top">
                  <el-form-item label="原密保问题" prop="oldquestion">
                    <el-input v-model="ruleForm.oldquestion" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="原密保答案" prop="oldanswer">
                    <el-input v-model="ruleForm.oldanswer" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="新密保问题" prop="newquestion">
                    <el-input v-model="ruleForm.newquestion" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="新密保答案" prop="newanswer">
                    <el-input v-model="ruleForm.newanswer" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item style="padding-top: 20px;">
                    <el-button type="primary" @click="submitForm('ruleForm')">提交修改</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import SelfMenu from "./SelfMenu";
import {modifyUserInfo} from '../../api/tenant.js'
export default {
  name: "SelfSecurity",
  components:{
    SelfMenu
  },
  data(){
    var validateoldanswer = (rule, value, callback)=>{
      if(value === ''){
        callback(new Error('请输入回答'))
      }
    }
    var validatenewquestion = (rule, value, callback)=>{
      if(value === ''){
        callback(new Error('请输入新问题'))
      }
    }
    var validatenewanswer = (rule, value, callback)=>{
      if(value === ''){
        callback(new Error('请输入新回答'))
      }
    }

    return{
      userInfo:{},
      ruleForm:{
        oldquestion:'',
        oldanswer:'',
        newquestion:'',
        newanswer:'',
      },
      rules: {
        oldanswer: [
          {require: true,message:'请输入回答', trigger:'blur'},
          {min:4,max:64,message: '密保回答长度必须在4-64个字符'},
          {validator: validateoldanswer,trigger: 'blur'}
        ],
        newquestion: [
          {require: true,message:'请输入密保问题', trigger:'blur'},
          {min:4,max:64,message: '密保问题长度必须在4-64个字符'},
          {validator: validatenewquestion,trigger: 'blur'}
        ],
        newanswer: [
          {require: true,message:'请输入密保答案', trigger:'blur'},
          {min:4,max:64,message: '密保回答长度必须在4-64个字符'},
          {validator: validatenewanswer,trigger: 'blur'}
        ],
      }
    }
  },
  methods:{
    async submitForm () {
      if (this.ruleForm.oldanswer === this.userInfo.securityQuestionAnswer) {
        this.userInfo.securityQuestionAnswer= this.ruleForm.newanswer
        this.userInfo.securityQuestionContext = this.ruleForm.newquestion
        modifyUserInfo(this.userInfo).then((response) => {
          const httpResult = response.data
          if (httpResult.code === 200) {
            this.$message.success('密保修改成功')
            window.sessionStorage.setItem('data', JSON.stringify(this.userInfo))
            this.$refs[formName].resetFields()
            this.ruleForm.oldquestion = this.userInfo.securityQuestionContext
          } else {
            this.$message.error('密保修改失败')
          }
        })
      } else {
        this.$message.warning("密保回答错误")
        this.ruleForm.resetFields()
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  },
  created() {
    const data = JSON.parse(window.sessionStorage.getItem("data"))
    this.userInfo = data
    this.ruleForm.oldquestion = data.securityQuestionContext
  }
}
</script>

<style scoped>
.dw-user-body{
  background-color: white;
  min-height: 600px;
}
</style>
